<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Babylon.js sample code</title>

    <!-- Babylon.js -->
    <script src="./js/pep.js"></script>
    <script src="./js/dat.gui.min.js"></script>
    <script src="./js/ammo.js"></script>
    <script src="./js/cannon.js"></script>
    <script src="./js/Oimo.js"></script>
    <script src="./js/libktx.js"></script>
    <script src="./js/earcut.min.js"></script>
    <script src="./js/babylon.js"></script>
    <script src="./js/babylon.inspector.bundle.js"></script>
    <script src="./js/babylonjs.materials.min.js"></script>
    <script src="./js/babylonjs.proceduralTextures.min.js"></script>
    <script src="./js/babylonjs.postProcess.min.js"></script>
    <script src="./js/babylonjs.loaders.js"></script>
    <script src="./js/babylonjs.serializers.min.js"></script>
    <script src="./js/babylon.gui.min.js"></script>

    <style>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script>
    var canvas = document.getElementById("renderCanvas");

    var engine = null;
    var scene = null;
    var sceneToRender = null;
    var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }); };
    var createScene = function (engine) {
        var scene = new BABYLON.Scene(engine);
        var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(0, -0.5, 1.0), scene);
        var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene);
        camera.setPosition(new BABYLON.Vector3(20, 70, -100));
        light.position = new BABYLON.Vector3(0, 25, -50);

        camera.attachControl(canvas, true);

        // Data
        var scale = 0.6;
        var operatingSystem_Series = [
            { label: "Macintosh", value: 12, color: new BABYLON.Color3(0, 1, 0) },
            { label: "Windows", value: 77, color: new BABYLON.Color3(1, 0, 0) },
            { label: "Linux", value: 4, color: new BABYLON.Color3(1, 0, 1) },
            { label: "iOS", value: 3, color: new BABYLON.Color3(1, 1, 0) },
            { label: "Android", value: 2, color: new BABYLON.Color3(0, 0, 1) },
            { label: "Win Phone", value: 1, color: new BABYLON.Color3(1, 1, 1) }
        ];

        var browsers_Series = [
            { label: "IE", value: 32, color: new BABYLON.Color3(0, 0, 1) },
            { label: "Chrome", value: 28, color: new BABYLON.Color3(1, 0, 0) },
            { label: "Firefox", value: 16, color: new BABYLON.Color3(1, 0, 1) },
            { label: "Opera", value: 14, color: new BABYLON.Color3(1, 1, 0) },
            { label: "Safari", value: 10, color: new BABYLON.Color3(0, 1, 1) }
        ];

        var playgroundSize = 100;
        // Background
        var background = BABYLON.Mesh.CreatePlane("background", playgroundSize, scene, false);
        background.material = new BABYLON.StandardMaterial("background", scene);
        background.scaling.y = 0.5;
        background.position.z = playgroundSize / 2 - 0.5;
        background.position.y = playgroundSize / 4;
        background.receiveShadows = true;
        var backgroundTexture = new BABYLON.DynamicTexture("dynamic texture", 512, scene, true);
        background.material.diffuseTexture = backgroundTexture;
        background.material.specularColor = new BABYLON.Color3(0, 0, 0);
        background.material.backFaceCulling = false;

        backgroundTexture.drawText("Eternalcoding", null, 80, "bold 70px Segoe UI", "white", "#555555");
        backgroundTexture.drawText("- browsers statistics -", null, 250, "35px Segoe UI", "white", null);

        // Ground
        var ground = BABYLON.Mesh.CreateGround("ground", playgroundSize, playgroundSize, 1, scene, false);
        var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
        groundMaterial.diffuseColor = new BABYLON.Color3(0.5, 0.5, 0.5);
        groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
        ground.material = groundMaterial;
        ground.receiveShadows = true;
        ground.position.y = -0.1;

        var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
        shadowGenerator.usePoissonSampling = true;

        var createSeries = function (series) {
            var margin = 2;
            var offset = playgroundSize / (series.length) - margin;
            var x = -playgroundSize / 2 + offset / 2;

            for (var index = 0; index < series.length; index++) {
                var data = series[index];

                var bar = BABYLON.Mesh.CreateBox(data.label, 1.0, scene, false);
                bar.scaling = new BABYLON.Vector3(offset / 2.0, 0, offset / 2.0);
                bar.position.x = x;
                bar.position.y = 0;

                // Animate a bit
                var animation = new BABYLON.Animation("anim", "scaling", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3);
                animation.setKeys([
                    { frame: 0, value: new BABYLON.Vector3(offset / 2.0, 0, offset / 2.0) },
                    { frame: 100, value: new BABYLON.Vector3(offset / 2.0, data.value * scale, offset / 2.0) }]);
                bar.animations.push(animation);

                animation = new BABYLON.Animation("anim2", "position.y", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT);
                animation.setKeys([
                    { frame: 0, value: 0 },
                    { frame: 100, value: (data.value * scale) / 2 }]);
                bar.animations.push(animation);
                scene.beginAnimation(bar, 0, 100, false, 2.0);

                // Material
                bar.material = new BABYLON.StandardMaterial(data.label + "mat", scene);
                bar.material.diffuseColor = data.color;
                bar.material.emissiveColor = data.color.scale(0.3);
                bar.material.specularColor = new BABYLON.Color3(0, 0, 0);

                // Shadows
                shadowGenerator.getShadowMap().renderList.push(bar);

                // Legend
                var barLegend = BABYLON.Mesh.CreateGround(data.label + "Legend", playgroundSize / 2, offset * 2, 1, scene, false);
                barLegend.position.x = x;
                barLegend.position.z = -playgroundSize / 4;
                barLegend.rotation.y = Math.PI / 2;

                barLegend.material = new BABYLON.StandardMaterial(data.label + "LegendMat", scene);
                var barLegendTexture = new BABYLON.DynamicTexture("dynamic texture", 512, scene, true);
                barLegendTexture.hasAlpha = true;
                barLegend.material.diffuseTexture = barLegendTexture;
                barLegend.material.emissiveColor = new BABYLON.Color3(0.4, 0.4, 0.4);

                var size = barLegendTexture.getSize();
                barLegendTexture.drawText(data.label + " (" + data.value + "%)", 80, size.height / 2 + 30, "bold 50px Segoe UI", "white", "transparent");

                // Going next
                x += offset + margin;
            }
        };

        createSeries(browsers_Series);

        // Limit camera
        camera.lowerAlphaLimit = Math.PI;
        camera.upperAlphaLimit = 2 * Math.PI;
        camera.lowerBetaLimit = 0.1;
        camera.upperBetaLimit = (Math.PI / 2) * 0.99;
        camera.lowerRadiusLimit = 5;
        camera.upperRadiusLimit = 150;

        return scene;
    };
    var engine;
    try {
        engine = createDefaultEngine();
    } catch(e) {
        console.log("the available createEngine function failed. Creating the default engine instead");
        engine = createDefaultEngine();
    }
    if (!engine) throw 'engine should not be null.';
    scene = createScene();;
    sceneToRender = scene

    engine.runRenderLoop(function () {
        if (sceneToRender) {
            sceneToRender.render();
        }
    });

    // Resize
    window.addEventListener("resize", function () {
        engine.resize();
    });
</script>
</body>
</html>
